<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Simple DOM Events</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Simple DOM Events</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#container {
    background-color: #00CCFF;
    border: 1px dotted black;
    padding: 1em;
    cursor: pointer;
}
#example-canvas #demo a {
    color: #00c;
    text-decoration: underline;
}
</style>

<div class="intro">
<p>Clicking in the blue box will pop up a "Hello World!" alert window.  Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same <code>href</code> attribute, will pop up an alert instead and not navigate to a new page.</p>

<p>Event Utility is used here to do two things:</p>

<ol>
	<li>Attach the <code>click</code> event handler to the blue box;</li>
	<li>Attach an event handler to the second <code>&lt;a&gt;</code> element that uses <code>preventDefault()</code> to prevent the link, when clicked, from navigating to a new page. </li>

</ol>
</div>

<div class="example yui3-skin-sam">
    <div id="demo">
    <div id="container">
        <p>Click for Hello World alert.</p>
    </div>
    <p><a href="http://yuilibrary.com" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>

    <p><a href="http://yuilibrary.com" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
</div>

<script>
YUI().use('node', function (Y) {
    // A function that pops up a "Hello World" alert:
    var helloWorld = function(e) {
        alert("Hello World!");
    }

    // subscribe the helloWorld function as an event handler for the click
    // event on the container div:
    var node = Y.one("#container");

    node.on("click", helloWorld);

    // A function that pops up an alert and prevents the default behavior of
    // the event for which it is a handler:
    var interceptLink = function(e) {
        e.preventDefault();
        alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
    }

    // subscribe our interceptLink function as a click handler for the second
    // anchor element:
    Y.one('#secondA').on("click", interceptLink);
});
</script>


</div>

<h2>Reacting to the <code>click</code> event</h2>

<p>To illustrate event handling syntax, we'll create a <code>&lt;div&gt;</code> and pop up an alert message when that <code>&lt;div&gt;</code> is clicked.</p>

<pre class="code prettyprint">&#x2F;&#x2F; Create a YUI instance and load the &#x27;node&#x27; module
YUI().use(&#x27;node&#x27;, function (Y) {

    &#x2F;&#x2F; A function that pops up a &quot;Hello World&quot; alert:
    var helloWorld = function (e) {
        alert(&quot;Hello World!&quot;);
    };

    ...</pre>


<p>We now use the Node's <code>on</code> method to attach our
<code>helloWorld</code> function as a handler for the <code>click</code> event.

<pre class="code prettyprint">&#x2F;&#x2F; Point to the container div with the CSS selector
var node = Y.one(&#x27;#container&#x27;);

node.on(&quot;click&quot;, helloWorld);</pre>


<p>Almost all event handling begins with a premise just this simple: we have an
element to which something might happen (eg, it might be clicked) and, when
that <em>does</em> happen, we want to do something (eg,
<code>helloWorld</code>).</p>

<h2 id="prevent">Preventing event behavior</h2>

<p>In some cases, you may want to replace the default behavior of an event.
For example, let's say you have two links on the page:</p>

<pre class="code prettyprint">&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;yuilibrary.com&#x2F;&quot; id=&quot;firstA&quot;&gt;The YUI Library. (Link navigates away from page.)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;

&lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;yuilibrary.com&#x2F;&quot; id=&quot;secondA&quot;&gt;The YUI Library. (Link&#x27;s default behavior is suppressed.)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</pre>


<p>Let's say that when the second link is clicked, instead of navigating away from the current page, you want to pop up an alert window.  The event object passed to your event handler is a facade &mdash; not the actual browser event object.  This facade supports the <code>preventDefault</code> method for cancelling inherent browser behavior such as anchor links loading a new page.</p>

<pre class="code prettyprint">&#x2F;&#x2F; A function that stops the browser from navigating away
&#x2F;&#x2F; from the page, and instead pops up an alert.
var interceptLink = function(e) {
    e.preventDefault();
    alert(&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;);
}

&#x2F;&#x2F; subscribe our interceptLink function to the second anchor
Y.one(&#x27;#secondA&#x27;).on(&quot;click&quot;, interceptLink);</pre>


<h2 id="fullcode">Full Code Listing</h2>
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
    &lt;div id=&quot;container&quot;&gt;
        &lt;p&gt;Click for Hello World alert.&lt;&#x2F;p&gt;
    &lt;&#x2F;div&gt;
    &lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;yuilibrary.com&quot; id=&quot;firstA&quot;&gt;The YUI Library. (Link navigates away from page.)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;

    &lt;p&gt;&lt;a href=&quot;http:&#x2F;&#x2F;yuilibrary.com&quot; id=&quot;secondA&quot;&gt;The YUI Library. (Link&#x27;s default behavior is suppressed.)&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;node&#x27;, function (Y) {
    &#x2F;&#x2F; A function that pops up a &quot;Hello World&quot; alert:
    var helloWorld = function(e) {
        alert(&quot;Hello World!&quot;);
    }

    &#x2F;&#x2F; subscribe the helloWorld function as an event handler for the click
    &#x2F;&#x2F; event on the container div:
    var node = Y.one(&quot;#container&quot;);

    node.on(&quot;click&quot;, helloWorld);

    &#x2F;&#x2F; A function that pops up an alert and prevents the default behavior of
    &#x2F;&#x2F; the event for which it is a handler:
    var interceptLink = function(e) {
        e.preventDefault();
        alert(&quot;You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.&quot;);
    }

    &#x2F;&#x2F; subscribe our interceptLink function as a click handler for the second
    &#x2F;&#x2F; anchor element:
    Y.one(&#x27;#secondA&#x27;).on(&quot;click&quot;, interceptLink);
});
&lt;&#x2F;script&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
                                        <a href="basic-example.html">Simple DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using the synthetic event API to create a DOM event that fires in response to arrow keys being pressed.">
                                        <a href="synth-example.html">Creating an Arrow Event for DOM Subscription</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Supporting cross-device swipe gestures, using the event-move gesture events">
                                        <a href="swipe-example.html">Supporting A Swipe Left Gesture</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to extend the base widget class, to create your own Widgets.">
                                        <a href="../widget/widget-extend.html">Extending the Base Widget Class</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to request data over HTTP.">
                                        <a href="../io/get.html">HTTP GET to request data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
